<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style  type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.overtitle{
				font-size: 90px;
				color: #0000FF;
				height: 400px;
				background-image: url(../day6/banner.png);
				background-repeat: no-repeat;
				background-position: center 0;
			}
			.outtitle{
				font-size: 10px;
				color: black;
				height: 40px;
				background-image:none; 
			}
		</style>
		<script>
			function changeStyle(){
				var d=document.getElementById("title");
				 d.className="overtitle";
			}
			function changeStyle2(){
				var d=document.getElementById("title");
				//d.className="outtitle";
				d.setAttribute("class","outtitle");
			}
		</script>
	</head>
	<body>
		<!--style="border: 2px solid red;font-size: 10px;"
		 不能添加，否则没有效果，因为行内样式优先级最高
		-->
		<h1 onmouseover="changeStyle()"  onmouseout="changeStyle2()" id="title" >
			教育改变生活
		</h1>
		<input type="button" value="改变css"  onclick="changeStyle()"/>
	</body>
</html>
